<template>
  <div class="nav">
    <div class="logo">
      <img class="img" src="~@/assets/images/logo.svg" alt="" />
      <span v-if="!collapse" class="title">vue3+TS</span>
    </div>
    <!--  @open="handleOpen"
      @close="handleClose" -->
    <el-menu
      active-text-color="#ffd04b"
      background-color="#00142c"
      class="el-menu-vertical"
      :default-active="defaultValue"
      :unique-opened="true"
      text-color="#fff"
      :collapse="collapse"
    >
      <template v-for="item in userMenus" :key="item.id">
        <template v-if="item.type === 1">
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <i v-if="item.icon" :class="item.icon"></i>
              <component v-if="item.icon" :is="'Button'"></component>
              <span>{{ item.name }}</span>
            </template>
            <template v-for="subitem in item.children" :key="subitem.id">
              <el-menu-item
                :index="subitem.id + ''"
                @click="handleMenuItemClick(subitem)"
              >
                <i v-if="subitem.icon" :class="subitem.icon"></i>
                <span>{{ subitem.name }}</span>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else-if="item.type === 2">
          <el-menu-item :index="item.id + ''">
            <i v-if="item.icon" :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps, ref } from 'vue';
import { useStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { pathMapToMenu } from '@/utils/map.menus';

const router = useRouter();
const route = useRoute();
const store = useStore();

defineProps({
  collapse: {
    type: Boolean,
    default: false
  }
});

// 取出我的动态匹配好的数据
const userMenus = computed(() => store.state.login.userMenus);

// 菜单默认选中操作
const menu = pathMapToMenu(userMenus.value, route.path);
const defaultValue = ref(menu.id + '');

const handleMenuItemClick = (item: any) => {
  router.push({ path: item.url ?? '/not-found' });
};
// const handleOpen = (key: any, keyPath: any) => {
//   console.log(key, keyPath);
// };
// const handleClose = (key: any, keyPath: any) => {
//   console.log(key, keyPath);
// };
</script>

<style lang="less" scoped>
.logo {
  // color: red;
  display: flex;
  height: 28px;
  padding: 12px 10px 8px 10px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  .img {
    height: 100%;
    margin: 0 10px;
  }

  .title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }
}
</style>
